<template>
  <div>
    <Spin
      size="large"
      style="position: absolute;z-index: 2;left: 50%; transform: translate(50%,70%);"
      v-if="isLoading"
    ></Spin>
    <Card>
      <!--
      * 菜单树组件
      * @module _c/table-tree
      * @desc 菜单树组件使用说明
      * @author zhangjl
      * @date 2019年05月20日17:22:43
      * @param {Number} [columns] - 表头
      * @param {String} [data] - 数据
      * @param {String} [expand-type] - 是否展示树
      * @param {String} [checkbox-click] - 点击当前行调运的事件
      * @example 调用示例
      * <tree-table
        ref="treeTable"
        expand-key="i"
        :expand-type="false"
        :columns="columns"
        :data="data"
        @checkbox-click="selectedRow"
        </tree-table>
      -->
      <tree-table
        ref="treeTable"
        expand-key="name"
        :expand-type="false"
        :columns="columns"
        :data="data"
        :is-fold="true"
        @row-click="handleClick"
        @expand-cell-click="handleClick"
      >
        <template slot-scope="scope" slot="name">
          <Input v-model="scope.row.name" placeholder="机构名称" v-if="scope.rowIndex === index"/>
          <template v-else>{{scope.row.name}}</template>
        </template>
        <template slot-scope="scope" slot="code">
          <Input v-model="scope.row.code" placeholder="机构编码" v-if="scope.rowIndex === index"/>
          <template v-else>{{scope.row.code}}</template>
        </template>
        <template slot-scope="scope" slot="operate">
          <template v-if="scope.rowIndex === index">
            <Button type="primary" size="small" style="margin-right: 5px" @click="saveRow(scope)">保存</Button>
            <Button type="error" size="small" @click="cancelRow(scope)">取消</Button>
          </template>
          <Button v-else type="info" size="small" @click="editRow(scope)">编辑</Button>
        </template>
      </tree-table>
    </Card>
  </div>
</template>

<script>
import { getOrg } from '@/api/sys/org'
import TreeTable from '_c/table-tree'
export default {
  components: {
    TreeTable
  },
  data () {
    return {
      index: -1,
      isLoading: false,
      selectable: true,
      columns: [
        {
          title: '',
          key: 'i',
          align: 'left',
          width: '100px'
        },
        {
          title: '机构名称',
          key: 'name',
          width: '400px',
          type: 'template',
          template: 'name'
        },
        {
          title: '机构编码',
          key: 'code',
          minWidth: '50px',
          type: 'template',
          template: 'code'
        },
        {
          title: '操作',
          key: 'operate',
          align: 'left',
          type: 'template',
          template: 'operate'
        }
      ],
      data: []
    }
  },
  created () {
    this.isLoading = true
    getOrg().then(res => {
      if (res && res.code === 1) {
        this.isLoading = false
        this.data = res.data
      }
    })
  },
  methods: {
    handleClick (option) {
      console.log(option)
    },
    selectedRow (row) {
      let s = this.$refs.treeTable.getCheckedProp()
      console.log(row, s)
    },
    editRow (row) {
      this.index = row.rowIndex
    },
    cancelRow () {
      this.index = -1
    },
    saveRow (row) {
      alert(JSON.stringify(row))
    }
  }
}
</script>
<style>
</style>
